<!--
 * @Date: 2022-06-29 11:19:28
 * @LastEditTime: 2022-07-14 10:35:46
-->
<!-- TODO: 登出功能、修改个人信息页面 -->
<template>
  <div id="nav-main">
    <div id="nav-topbar">
      <a class="navbar-text clickbtn" href="/">sublime</a>
      <div class="none-flex"></div>
      <div id="nav-login" class="navbar-text clickbtn" @click="routerTo('/login')" v-if="!isLogin">登陆/注册</div>
      <div id="nav-user" v-else>
        <el-dropdown trigger="click" szie="small" @command="handleCommand">
          <span class="el-dropdown-link navbar-text clickbtn">
            {{userInfo.nickname}} <i class="el-icon-caret-bottom"></i>
          </span>
          <el-dropdown-menu slot="dropdown" style="width: 150px">
              <el-dropdown-item command="userPage">
                  个人主页
              </el-dropdown-item>
              <el-dropdown-item command="changeUserInfo">
                  修改用户信息
              </el-dropdown-item>
              <!-- <el-dropdown-item command="changeUserInfo">
              </el-dropdown-item> -->
            <el-dropdown-item command="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div id="nav-navi">
      <div id="navi-content">
          <div id="navi-search">
            <div class="navi-left-container navi-flex-row">
              <div id="navi-logo">
                <a href="/">sublime电影推荐</a>
              </div>
              <div id="navi-search-input">
                <!-- <input type="text" placeholder="搜索电影" id="navi-search-input-item" v-model="searchInfo" @keydown.enter="search" autocomplete="off">
                <i class="el-icon-search" id="navi-search-btn" @click="search"></i> -->
              </div>
            </div>
            <div class="navi-right-container"></div>
          </div>
          <div id="navi-class">
            <ul id="navi-class-choice" class="navi-left-container">
              <li class="navi-choices">
                <a class="navi-choices-text" href="/">首页</a>
              </li>
              <li class="navi-choices">
                <router-link class="navi-choices-text" to="/rank">排行榜</router-link>
              </li>
              <!-- <li class="navi-choices">
                <router-link class="navi-choices-text" to="/comments">影评</router-link>
              </li> -->
            </ul>
            <div class="navi-right-container"></div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import { logout } from '@/api/user'
import router from '@/router'
export default {
  name: 'NavBar',
  data () {
    return {
      searchInfo: '',
      isLogin: false,
      userInfo: {}
      // loading: true
    }
  },
  methods: {
    routerTo: function (path) {
      router.push(path)
    },
    search: function () {
      let temp = this.searchInfo ? ('client正在搜索' + this.searchInfo) : '用户搜索内容为空'
      alert(temp)
    },
    user_logout: function () {
      logout()
        .then(res => {
          if (res.data.state === 200) {
            this.$store.commit('resetUserInfo')
            this.getUserInfoFromVuex()
            this.$router.push('/')
            this.$message({
              message: '登出成功!',
              type: 'success'
            })
          }
        })
        .catch(err => {
          this.$message({
            message: err,
            type: 'error'
          })
        })
    },
    handleCommand: function (command) {
      switch (command) {
        case 'userPage':
          this.$router.push({
            path: '/user/' + this.userInfo.uid
          })
          break
        case 'logout':
          this.user_logout()
          break
        case 'changeUserInfo':
          this.$router.push({
            path: '/user/change/'
          })
          break
      }
    },
    getUserInfoFromVuex: function () {
      this.userInfo = this.$store.state.userInfo
      this.isLogin = this.$store.state.isLogin
    }
  },
  // mounted: function () {
  //   this.getUserInfoFromVuex()
  //   this.loading = false
  // },
  created () {
    this.getUserInfoFromVuex()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#nav-main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#nav-topbar {
  background: rgb(84, 86, 82);
  height: 28px;
  padding: 0 29px 0 29px;
  display: flex;
  line-height: 28px;
}
.navbar-text {
  color: rgb(213, 213, 213);
  font-size: 12px;
}
.navbar-text:hover {
  color: rgb(255,255,255);
}
.none-flex {
  flex: 1;
}
#nav-navi {
  width: 100%;
  height: 115px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background: rgb(239, 242, 244);
}
#navi-content {
  display: flex;
  flex-direction: column;
  min-width: 1024px;
  margin: 0 auto;
  height: 100%;
}
#navi-class {
  width: 100%;
  display: flex;
  height: 35px;
  flex-direction: row;
  border-top: 1px solid rgb(227, 235, 236);
}
#navi-search {
  width: 100%;
  height: 80px;
  display: flex;
  flex-direction: row;
  line-height: 80px;
}
#navi-logo {
  width: 40%;
  height: 50px;
  display: flex;
  font-size: 28px;
}
#navi-logo a{
  line-height: 50px;
  color: rgb(37, 141, 205);
  font-weight: 600;
}
#navi-search-input {
  display: flex;
  align-items: center;
  width: 60%;
}
#navi-search-input-item {
  border: none;
  text-align: left;
  outline: none;
  background: #fff;
  height: 30px;
  padding-left: 10px;
  line-height: 30px;
  font-size: 13px;
  width: 80%;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgb(18 18 18 / 10%);
}
#navi-class-choice {
  display: flex;
}
.navi-left-container {
  width: 70%;
  height: 100%;
}
.navi-right-container {
  width: 30%;
}
.navi-flex-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
#navi-search-btn {
  background: rgb(139, 149, 158);
  color: rgb(255,255,255);
  width: 30px;
  height: 30px;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 3px;
  margin-left: -2px;
  box-shadow: 0 1px 3px rgb(18 18 18 / 10%);
}
.navi-choices {
  height: 100%;
  width: 33%;
}
.navi-choices-text {
  color: rgb(34, 119, 170);
  height: 100%;
  line-height: 30px;
  display: inline;
  font-size: 18px;
}
.navi-choices-text:hover {
  background: rgb(34, 119, 170);
  color: #fff;
}
/* #nav-user {
} */
</style>
